<template>
  <div>
  <div>
    <a-card>
      <span>
        工单编号：<a-input v-model:value="value" placeholder="请输入" style="width: 14vw; height: 5vh;" allowClear/>
      </span>
      <span style="margin-left: 1vw;">
        工单状态：<a-select v-model:value="value1" placeholder="请输入"  style="width: 14vw; height: 5vh;" allowClear>
              <a-select-option value="代办">代办</a-select-option>
              <a-select-option value="进行">进行</a-select-option>
              <a-select-option value="取消">取消</a-select-option>
              <a-select-option value="完成">完成</a-select-option>
              </a-select>
      </span>
      <span style="margin-left: 1vw;">
         <a-button type="primary" style="height: 4.5vh;border-radius: 5px;" @click="seach">
            <template #icon><SearchOutlined /></template>
            查询
          </a-button>
      </span>
    </a-card>
  </div>
      <div style="margin-top: 3vh;">
    <a-card >
      <div>
        <span>
          <a-button type="link" style="color:#fff; height: 5vh; background-image: linear-gradient(-60deg, #ff5858 0%, #f09819 100%); " @click="showModal">
             <template #icon><PlusCircleOutlined /></template>
             新建
           </a-button>
           
        </span>
        <span style="margin-left: 1vw;">
          <a-button type="text"  style="height: 5vh; background-color: #f3e7e1;"  @click="showModal1">
             工单配置
           </a-button>
        </span>
      </div>
      <div style="margin-top: 3vh;">
        <a-table
              :columns="columns"
              :data-source="data"
            :pagination="false"
            :rowKey="unkey"
            >
          <!-- 操作 -->
          <template #czsj="{ record }">
             <!-- <a-button type="link" @click="showModal3(record)">查看详情</a-button> -->
             <a  @click="showModal3(record)">查看详情</a>
           </template>
          </a-table>
      </div>
      <!-- 分页 -->
      <div style="margin-top: 2.5vh; margin-bottom: 4vh;">
        <span style="color:#dbe5ef; font-size: 1rem; margin-left: 1rem;">
          共{{total}}条记录&nbsp;&nbsp;第 {{current}}/{{ Math.ceil(total/pageSize)}}页
        </span>
        <span style="float: right;">
          <span style="margin-right: 3vw;">
            <a-button style="background: #d5ddf8;" :disabled="current<=1" @click="onup">上一页</a-button>
          </span>
          <span style="margin-right: 4vw;">
            <a-button style="background: #d5ddf8;" :disabled="current>=Math.ceil(total/pageSize)" @click="ondown">下一页</a-button>
          </span>
        </span>
      </div>
    </a-card>
  </div>
  <!-- 用于存放对话框 -->
  <div>
     <a-modal v-model:visible="visible" title="新增工单" :footer="null" style="width: 40vw; height: 30vh;" destroyOnClose>
          <a-form
              ref="formRef"
              :model="formState"
              :rules="rules"
              :label-col="labelCol"
              :wrapper-col="wrapperCol"
            >
              <a-form-item ref="sbid" label="设备编号" name="sbid">
                <!-- <a-input placeholder="请输入" v-model:value="formState.sbid" showCount :maxlength="15"/> -->
          <a-select v-model:value="formState.sbid" placeholder="请选择">
            <a-select-option v-for="item,index in lists" :key="index" :value="item._id">{{item.name}}</a-select-option>
          </a-select>
              </a-form-item>
              <a-form-item label="工单类型" name="gdlx">
                <a-select v-model:value="formState.gdlx" placeholder="请选择">
                  <a-select-option value="补货工单">补货工单</a-select-option>
                </a-select>
              </a-form-item>
          <a-form-item label="补货数量">
            <a-button type="link" style="font-size: 1rem;" @click="showModal2"> <FileTextOutlined />补货清单</a-button>
          </a-form-item>
          <a-form-item label="运营人员" name="yyry">
            <a-select v-model:value="formState.yyry" placeholder="请选择">
              <a-select-option v-for="item,index in lis" :key="index" :value="item._id">{{item.pname}}</a-select-option>
            </a-select>
          </a-form-item>
              <a-form-item label="备注" name="bz">
                <a-textarea placeholder=" 请输入备注 (不超过40字)" v-model:value="formState.bz"  showCount :maxlength="40"/>
              </a-form-item>
              <a-form-item :wrapper-col="{ span: 12, offset: 6 }">
                <a-button style="margin-right: 2vw;background: #fbf4f0;border: 0; width: 5vw;"  @click="handleQx">取消</a-button>
                <a-button style="margin-left: 2vw;background-image: linear-gradient(-60deg, #ff5858 0%, #f09819 100%); border: 0; width: 5vw; color: #fff;" @click="onSubmit">确定</a-button>
              </a-form-item>
            </a-form>
    </a-modal>
    <a-modal v-model:visible="visible1" title="工单配置" :footer="null">
         <a-form
             ref="formRef"
             :model="formState1"
             :label-col="labelCol"
             :wrapper-col="wrapperCol"
           >
             <a-form-item  label="补货警戒线:" name="num">
           <a-input-number :min="1" :max="100000" v-model:value="formState1.num" style="width: 18vw; text-align: center;" autofocus/>
             </a-form-item>
             <a-form-item :wrapper-col="{ span: 12, offset: 6 }">
           <a-button style="margin-right: 2vw;background: #fbf4f0;border: 0; width: 5vw;"  @click="handleQx1">取消</a-button>
               <a-button style="margin-left: 2vw;background-image: linear-gradient(-60deg, #ff5858 0%, #f09819 100%); border: 0; width: 5vw; color: #fff;" @click="handleOk1">确定</a-button>
             </a-form-item>
           </a-form>
    </a-modal>
    <a-modal v-model:visible="visible2" title="补货详情" :footer="null" class="moodel3"  @cancel="oncancel">
      <div>
        <div>
          <a-table
                :columns="columns1"
                :data-source="data1"
              :pagination="false"
              style="margin: -1.5vh 0 0 -1vw; height: 43vh;"
              >
            </a-table>
        </div>
        <div style="margin-left: 7vw; margin-top: 3vh;">
        <a-button style="margin-right: 2vw;background: #fbf4f0;border: 0; width: 5vw;"  @click="handleQx2">取消</a-button>
               <a-button style="margin-left: 2vw;background-image: linear-gradient(-60deg, #ff5858 0%, #f09819 100%); border: 0; width: 5vw; color: #fff;" @click="handleOk2">确定</a-button>
      </div>
      </div>
    </a-modal>
    <a-modal v-model:visible="visible1" title="工单配置" :footer="null">
         <a-form
             ref="formRef"
             :model="formState1"
             :label-col="labelCol"
             :wrapper-col="wrapperCol"
           >
             <a-form-item  label="补货警戒线:" name="num">
           <a-input-number :min="1" :max="100000" v-model:value="formState1.num" style="width: 18vw; text-align: center;" autofocus/>
             </a-form-item>
             <a-form-item :wrapper-col="{ span: 12, offset: 6 }">
           <a-button style="margin-right: 2vw;background: #fbf4f0;border: 0; width: 5vw;"  @click="handleQx1">取消</a-button>
               <a-button style="margin-left: 2vw;background-image: linear-gradient(-60deg, #ff5858 0%, #f09819 100%); border: 0; width: 5vw; color: #fff;" @click="handleOk1">确定</a-button>
             </a-form-item>
           </a-form>
    </a-modal>
    <a-modal v-model:visible="visible3" title="工单详情" :footer="null" >
       <div>
         <div style="background-color: #f8f8f8;height: 8vh;" v-if="selectone.gdstatus=='代办'">
           <span >
             <img src="../img/1.png" alt="" style="margin-top: -1vh;">
           </span>
           <span style="margin-left: 1.5vw;">
              <span style="margin-top: -1vh;">代办</span>
           </span>
           <span style="margin-left: 18vw;">
             <img src="../img/2.png" alt="" style="margin-top: -1vh;">
           </span>
         </div>
         <div style="background-color: #f8f8f8;height: 8vh;" v-if="selectone.gdstatus=='取消'">
           <span >
             <img src="../img/3.png" alt="" style="margin-top: -1vh;">
           </span>
           <span style="margin-left: 1.5vw;">
              <span style="margin-top: -1vh;">取消</span>
           </span>
           <span style="margin-left: 18vw;">
             <img src="../img/4.png" alt="" style="margin-top: -1vh;">
           </span>
         </div>
         <div style="background-color: #f8f8f8;height: 8vh;" v-if="selectone.gdstatus=='完成'">
           <span >
             <img src="../img/5.png" alt="" style="margin-top: -1vh;">
           </span>
           <span style="margin-left: 1.5vw;">
              <span style="margin-top: -1vh;">完成</span>
           </span>
           <span style="margin-left: 18vw;">
             <img src="../img/6.png" alt="" style="margin-top: -1vh;">
           </span>
         </div>
         <div style="margin-top: 3vh;">
           <a-descriptions :column="2">
               <a-descriptions-item label="设备编号">{{selectone.sbid.name}}</a-descriptions-item>
               <a-descriptions-item label="创建日期">{{selectone.cjtime}}</a-descriptions-item>
               <a-descriptions-item label="运营人员">{{selectone.yyry.pname}}</a-descriptions-item>
             <a-descriptions-item label="取消时间" v-if="selectone.gdstatus=='取消'">{{selectone.wctime}}</a-descriptions-item>
             <a-descriptions-item label="完成时间" v-if="selectone.gdstatus=='完成'">{{selectone.wctime}}</a-descriptions-item>
               <a-descriptions-item label="工单类型">{{selectone.gdlx}}</a-descriptions-item>
               <a-descriptions-item label="工单方式">
                 {{selectone.fs}}
               </a-descriptions-item>
             <a-descriptions-item label="补货数量">
               <a-button type="link" style="margin-top: -.6vh;" @click="showModal4"> 补货清单</a-button>
             </a-descriptions-item>
             <a-descriptions-item label="备注">{{selectone.bz}}</a-descriptions-item>
             </a-descriptions>
         </div>
         <div  v-if="selectone.gdstatus=='代办'" style="text-align: center; margin-top: 2vh;">
           <a-button  style="background:#fbf4f0; border: 0; font-size: .9rem;margin-bottom: 3vh;" @click="showModal5"> 取消工单</a-button>
         </div>
         <div  v-if="selectone.gdstatus=='取消'" style="text-align: center; margin-top: 2vh;">
           <a-button  style="background:#fbf4f0; border: 0; font-size: .9rem;margin-bottom: 3vh;" @click="showModal6"> 重新创建</a-button>
         </div>
       </div>
    </a-modal>
    <a-modal v-model:visible="visible4" title="补货详情" :footer="null" @cancel="oncancel2">
      <a-table
            :columns="columns2"
            :data-source="selectone.qd"
          :pagination="false"
          style="margin: -1.5vh 0 0 -1vw; height: 43vh;"
          >
        </a-table>
    </a-modal>
    <a-modal v-model:visible="visible5"  :footer="null" :closable="false" width="28vw">
      <span>
        <InfoCircleFilled style="color:#ff665f; font-size: 1.2rem;"/>
      </span>
      <span style="margin-left: 1vw; font-size: 1rem;">
        取消工单后，将不能恢复，是否确定取消？
      </span>
      <div style="margin-top: 5vh; margin-bottom: 2vh;margin-left: 7vw;">
        <span>
          <a-button @click="handleQx5"> 取消</a-button>
        </span>
        <span style="margin-left: 2vw;">
          <a-button style="background: #7f9dff;color:#fff;" @click="handleOk5"> 确定</a-button>
        </span>
      </div>
    </a-modal>
    <a-modal v-model:visible="visible6" title="重建工单" :footer="null" style="width: 40vw; height: 30vh;">
     <a-form
       ref="formRef"
       :model="selectones"
       :rules="rules"
       :label-col="labelCol"
       :wrapper-col="wrapperCol"
       >
       <a-form-item ref="sbid" label="设备编号" name="sbid">
         <!-- <a-input placeholder="请输入" v-model:value="selectone.sbid" showCount :maxlength="15"/> -->
         <a-select v-model:value="selectones.sbid" placeholder="请选择">
           <a-select-option v-for="item,index in lists" :key="index" :value="item._id">{{item.name}}</a-select-option>
         </a-select>
       </a-form-item>
       <a-form-item label="工单类型" name="gdlx">
         <a-select v-model:value="selectones.gdlx" placeholder="请选择">
         <a-select-option value="补货工单">补货工单</a-select-option>
         </a-select>
       </a-form-item>
        <a-form-item label="补货数量">
        <a-button type="link" style="font-size: 1rem;" @click="showModal2"> <FileTextOutlined />补货清单</a-button>
        </a-form-item>
        <a-form-item label="运营人员" name="yyry">
        <a-select v-model:value="selectones.yyry" placeholder="请选择">
          <a-select-option v-for="item,index in lis" :key="index" :value="item._id">{{item.pname}}</a-select-option>
        </a-select>
        </a-form-item>
       <a-form-item label="备注" name="bz">
         <a-textarea placeholder=" 请输入备注 (不超过40字)" v-model:value="selectones.bz"  showCount :maxlength="40"/>
       </a-form-item>
       <a-form-item :wrapper-col="{ span: 12, offset: 6 }">
         <a-button style="margin-right: 2vw;background: #fbf4f0;border: 0; width: 5vw;"  @click="handleQxs">取消</a-button>
         <a-button style="margin-left: 2vw;background-image: linear-gradient(-60deg, #ff5858 0%, #f09819 100%); border: 0; width: 5vw; color: #fff;" @click="onSubmits">确定</a-button>
       </a-form-item>
       </a-form>
    </a-modal>
  </div>
  </div>
</template>

<script  lang="ts">
import { defineComponent,reactive, ref, toRaw,onMounted } from 'vue'
import { ValidateErrorEntity } from 'ant-design-vue/es/form/interface';
import axios from 'axios'
let baseurl = "http://localhost:3201/api";
import { SearchOutlined,PlusCircleOutlined,SmileOutlined, DownOutlined,FileTextOutlined,InfoCircleFilled } from '@ant-design/icons-vue';
interface FormState {
sbid: string;
gdlx: string | undefined;
yyry: string | undefined;
bz: string;
}
// 表格的列
const columns = [
  {
    title: "序号",
    dataIndex: "_id",
  },
  {
    title: "工单编号",
    dataIndex: "gdid",
  },
  {
    title: "设备编号",
    dataIndex: "sbid.name",
  },
  {
    title: "工单类型",
    dataIndex: "gdlx",
  },
  {
    title: "工单方式",
    dataIndex: "fs",
  },
  {
    title: "工单状态",
    dataIndex: "gdstatus",
  slots: {
    customRender: 'vipstatu',
  },
  },
  {
    title: "运营人员",
    dataIndex: "yyry.pname",
  },
  {
    title: "创建日期",
    dataIndex: "cjtime",
  },
  {
    title:"操作",
    dataIndex: "_id",
    slots: {
      customRender: 'czsj',
    },
  }
];
const columns1 = [
  {
    title: "货道编号",
    dataIndex: "hdid",
  },
  {
    title: "商品名称",
    dataIndex: "shopname",
  },
  {
    title: "当前数量",
    dataIndex: "shopnum",
  },
  {
    title: "还可添加",
    dataIndex: "tj",
  },
  {
    title: "补满数量",
    dataIndex: "bm",
  },
];
const columns2 = [
  {
    title: "货道编号",
    dataIndex: "id",
  },
  {
    title: "商品",
    dataIndex: "sname.name",
  },
  {
    title: "补满数量",
    dataIndex: "num",
  },
];
export default defineComponent({
 components: {
    SearchOutlined,
  PlusCircleOutlined,
  SmileOutlined,
  DownOutlined,
  FileTextOutlined,
  InfoCircleFilled,
  },
  setup() {
  const data1=ref([])
  const data =ref([
    {
      // id
      _id:1,
      // 工单编号
      gdid:"292211",
      // 设备编号
      sbid:"0111",
      // 工单类型
      gdlx:"补货工单",
      // 工单方式
      fs:"手动",
      // 工单状态
      gdstatus:"取消",
      // 运营人员
      yyry:"运营潘子庆",
      // 创建日期
      cjtime:"2023.01.03 15:00:14",
    // 备注
    bz:"aaaaaa",
    qd:[
      {hdid:"1-1",shopname:"可口可乐",shopnum:100,tj:10,bm:20},
      {hdid:"1-2",shopname:"辣条",shopnum:80,tj:100,bm:30},
    ],
    wctime:'2023.01.03 19:00:14'
    },{
      // id
      _id:2,
      // 工单编号
      gdid:"292211",
      // 设备编号
      sbid:"0111",
      // 工单类型
      gdlx:"补货工单",
      // 工单方式
      fs:"手动",
      // 工单状态
      gdstatus:"代办",
      // 运营人员
      yyry:"运营潘子庆",
      // 创建日期
      cjtime:"2023.01.03 15:00:14",
    // 备注
    bz:"aaaaaa",
    qd:[
      {hdid:"1-1",shopname:"可口可乐",shopnum:100,tj:10,bm:20},
      {hdid:"1-2",shopname:"辣条",shopnum:80,tj:100,bm:30},
    ],
    wctime:'2023.01.03 19:00:14'
    },{
      // id
      _id:3,
      // 工单编号
      gdid:"292211",
      // 设备编号
      sbid:"0111",
      // 工单类型
      gdlx:"补货工单",
      // 工单方式
      fs:"手动",
      // 工单状态
      gdstatus:"完成",
      // 运营人员
      yyry:"运营潘子庆",
      // 创建日期
      cjtime:"2023.01.03 15:00:14",
    // 备注
    bz:"aaaaaa",
    qd:[
      {hdid:"1-1",shopname:"可口可乐",shopnum:100,tj:10,bm:20},
      {hdid:"1-2",shopname:"辣条",shopnum:80,tj:100,bm:30},
    ],
    wctime:'2023.01.03 19:00:14'
    },{
      // id
      _id:4,
      // 工单编号
      gdid:"292211",
      // 设备编号
      sbid:"0111",
      // 工单类型
      gdlx:"补货工单",
      // 工单方式
      fs:"手动",
      // 工单状态
      gdstatus:"代办",
      // 运营人员
      yyry:"运营潘子庆",
      // 创建日期
      cjtime:"2023.01.03 15:00:14",
    // 备注
    bz:"aaaaaa",
    qd:[
      {hdid:"1-1",shopname:"可口可乐",shopnum:100,tj:10,bm:20},
      {hdid:"1-2",shopname:"辣条",shopnum:80,tj:100,bm:30},
    ],
    wctime:'2023.01.03 19:00:14'
    },{
      // id
      _id:5,
      // 工单编号
      gdid:"292211",
      // 设备编号
      sbid:"0111",
      // 工单类型
      gdlx:"补货工单",
      // 工单方式
      fs:"手动",
      // 工单状态
      gdstatus:"代办",
      // 运营人员
      yyry:"运营潘子庆",
      // 创建日期
      cjtime:"2023.01.03 15:00:14",
    // 备注
    bz:"aaaaaa",
    qd:[
      {hdid:"1-1",shopname:"可口可乐",shopnum:100,tj:10,bm:20},
      {hdid:"1-2",shopname:"辣条",shopnum:80,tj:100,bm:30},
    ],
    wctime:'2023.01.03 19:00:14'
    },
  ])
  // 工单编号搜索框
  const selectone=ref({})
      const value = ref<string>('');
  // 工单状态的下拉框
  const value1 = ref<string | undefined>(undefined);
  // 当前页
  const unkey=ref(0)
  const current = ref<number>(1);
  // 每页条数
  const pageSize = ref(10);
  // 总数量
  const total = ref(48);
  // 上一页
  const onup=()=>{
    current.value--
    showList()
  }
  // 下一页
  const ondown=()=>{
    current.value++
    showList()
  }
  const visible = ref<boolean>(false);
  const visible1 = ref<boolean>(false);
  const visible2 = ref<boolean>(false);
  const visible3 = ref<boolean>(false);
  const visible4 = ref<boolean>(false);
  const visible5 = ref<boolean>(false);
  const visible6 = ref<boolean>(false);
  const showModal = () => {
    visible.value = true;
  };
  const showModal1 = () => {
    visible1.value = true;
  };
  const showModal6 = () => {
    console.log(toRaw(selectones))
    visible3.value=false;
    visible6.value = true;
  };
  const showModal2 = () => {
    visible.value = false;
    visible2.value = true;
  };
  const showModal3 = (record) => {
    selectone.value=toRaw(record)
    let arr=JSON.parse(JSON.stringify(toRaw(record)))
    // console.log(toRaw(record))
    selectones.value=arr
    selectones.value.sbid=arr.sbid._id
    selectones.value.yyry=arr.yyry._id
    selectones.value.gdstatus="代办"
    console.log(toRaw(selectones.value))
    visible3.value = true;
  };
  const showModal4 = () => {
    visible3.value = false;
    visible4.value = true;
  };
  const showModal5 = () => {
    visible3.value = false;
    visible5.value = true;
  };
  const handleOk = () => {
    visible.value = false;
  };
  const handleOk1 = () => {
    visible1.value = false;
  };
  const handleOk2 = () => {
    visible2.value = false;
    visible.value = true;
  };
  const handleQx = () => {
    visible.value = false;
  };
  const handleQxs = () => {
    
    visible6.value = false;
  };
  const handleQx1 = () => {
    visible1.value = false;
  };
  const handleQx2 = () => {
    visible2.value = false;
    visible.value = true;
  };
  const handleOk5 = () => {
  let arr=toRaw(data.value)
    // arr.forEach(item=>{
     // if(item._id==toRaw(selectone.value)._id){
      //  item.gdstatus="取消"
      //  item.wctime=`${new Date().getFullYear()}`+'.'+`${new Date().getMonth() +1 < 10 ? "0" + (new Date().getMonth() +1) : new Date().getMonth() +1}`+"."+`${new Date().getDate() < 10 ? "0" + new Date().getDate() : new Date().getDate()}`+' '+`${new Date().getHours()}`+":"+`${new Date().getMinutes() < 10 ? "0" + new Date().getMinutes() : new Date().getMinutes()}`+":"+`${new Date().getSeconds() < 10 ? "0" + new Date().getSeconds() : new Date().getSeconds()}`
     // }
    // })
    // data.value=arr
    let wctime=`${new Date().getFullYear()}`+'.'+`${new Date().getMonth() +1 < 10 ? "0" + (new Date().getMonth() +1) : new Date().getMonth() +1}`+"."+`${new Date().getDate() < 10 ? "0" + new Date().getDate() : new Date().getDate()}`+' '+`${new Date().getHours()}`+":"+`${new Date().getMinutes() < 10 ? "0" + new Date().getMinutes() : new Date().getMinutes()}`+":"+`${new Date().getSeconds() < 10 ? "0" + new Date().getSeconds() : new Date().getSeconds()}`
    axios.put(`http://localhost:3201/api/word/qx?_id=${toRaw(selectone.value)._id}&wctime=${wctime}`).then(resx=>{
        visible5.value = false;
        unkey.value+=1
        showList()
    })
  };
  const handleQx5 = () => {
    visible5.value = false;
    visible3.value=true
  };
  const formRef = ref();
  let formStates= reactive({})
  let selectones=ref({})
  let formState = reactive({
    sbid: undefined,
    gdlx: undefined,
    yyry:undefined,
    bz: '',
    qd:[],
    gdid:`${new Date().getFullYear()}`+`${new Date().getMonth() +1 < 10 ? "0" + (new Date().getMonth() +1) : new Date().getMonth() +1}`+`${new Date().getDate() < 10 ? "0" + new Date().getDate() : new Date().getDate()}`+`${new Date().getHours()}`+`${new Date().getMinutes()}`+`${new Date().getSeconds()}`,
    fs:"手动",
    gdstatus:"代办",
    cjtime:`${new Date().getFullYear()}`+'.'+`${new Date().getMonth() +1 < 10 ? "0" + (new Date().getMonth() +1) : new Date().getMonth() +1}`+"."+`${new Date().getDate() < 10 ? "0" + new Date().getDate() : new Date().getDate()}`+' '+`${new Date().getHours()}`+":"+`${new Date().getMinutes() < 10 ? "0" + new Date().getMinutes() : new Date().getMinutes()}`+":"+`${new Date().getSeconds() < 10 ? "0" + new Date().getSeconds() : new Date().getSeconds()}`,
    wctime:`${new Date().getFullYear()}`+'.'+`${new Date().getMonth() +1 < 10 ? "0" + (new Date().getMonth() +1) : new Date().getMonth() +1}`+"."+`${new Date().getDate() < 10 ? "0" + new Date().getDate() : new Date().getDate()}`+' '+`${new Date().getHours()}`+":"+`${new Date().getMinutes() < 10 ? "0" + new Date().getMinutes() : new Date().getMinutes()}`+":"+`${new Date().getSeconds() < 10 ? "0" + new Date().getSeconds() : new Date().getSeconds()}`,
    uid:"运营",
  });
  const formState1=reactive({
    num:3
  })
  const rules = {
    sbid: [
    { required: true, message: '请输入', trigger: 'blur' },
    ],
    gdlx: [{ required: true, message: '请选择', trigger: 'change' }],
    yyry: [{ required: true, message: '请选择', trigger: 'change' }],
    bz: [{ required: true, message: '请输入', trigger: 'blur' }],
  };
  const onSubmit =() => {
    formRef.value
    .validate()
    .then(() => {
      console.log(formState)	
      axios.post(`http://localhost:3201/api/word/add`,toRaw(formState)).then(resx=>{
        handleOk()
        showList()
      })
      // console.log(toRaw(formState))
      
    })
    .catch((error: ValidateErrorEntity<FormState>) => {
      console.log('error', error);
    });
  };
  const onSubmits = () => {
    formRef.value
    .validate()
    .then(() => {
      axios.put(`http://localhost:3201/api/word/cg?_id=${toRaw(selectones.value)._id}`,toRaw(selectones.value)).then(res=>{
         visible6.value=false
         unkey.value+=1
         showList()
      })
      console.log()
    })
    .catch((error: ValidateErrorEntity<FormState>) => {
      console.log('error', error);
      visible6.value=false
    });
  };
  const resetForm = () => {
    formRef.value.resetFields();
  };
  onMounted(() => {
    showList()
    showlists()
  })
  const lis=ref([])
  const lists=ref([])
  const showlists=async()=>{
    await axios.get(`http://localhost:3201/api/word/sblis`).then(res=>{
      lis.value=res.data.data
    })
    await axios.get(`http://localhost:3201/api/word/eqlis`).then(res=>{
      lists.value=res.data.data
    })
  }
  const showList=async()=>{
    await axios.get(`http://localhost:3201/api/work/list?pageSize=${pageSize.value}&pageIndex=${current.value}&seachname=${value.value}&value=${value1.value}`).then(res=>{
      console.log(value.value,1,value1.value)
      console.log(res.data)
      data.value=res.data.data
      total.value=res.data.count
    })
  }
  const oncancel2=()=>{
    visible4.value=false
    visible3.value=true
  }
  const oncancel1=()=>{
    visible2.value=false
    visible.value=true
  }
  const seach=()=>{
    showList()
  }
  return {
    selectones,
    lis,
    lists,
    seach,
    unkey,
    value,
    oncancel2,
    oncancel1,
    value1,
    data,
    data1,
    columns1,
    columns2,
    columns,
    current,
    pageSize,
    total,
    onup,
    ondown,
    visible,
    visible6,
    visible5,
    showModal,
    showModal6,
    showModal5,
    handleOk,
    handleOk5,
    visible1,
    visible3,
    visible4,
    showModal1,
    showModal3,
    showModal4,
    handleOk1,
    handleQx,
    handleQxs,
    handleQx5,
    handleQx1,
    formRef,
    labelCol: { span: 5 },
    wrapperCol: { span: 17 },
    other: '',
    formState,
    formStates,
    rules,
    onSubmit,
    onSubmits,
    resetForm,
    formState1,
    visible2,
    showModal2,
    handleOk2,
    handleQx2,
    selectone,
  };
  },
})
</script>

<style scoped lang='scss'>
.ant-input-number-input{
text-align: center;
}

</style>
